import { useState } from 'react';

interface Section {
  label: string;
  body: string;
}

interface Props {
  sections: Section[];
  primary: string;
  radius: number;
}

export default function QuoteTermsIsland({ sections, primary, radius }: Props) {
  // Open first section by default
  const [open, setOpen] = useState<Record<number, boolean>>({ 0: true });

  const toggle    = (i: number) => setOpen(p => ({ ...p, [i]: !p[i] }));
  const allOpen   = sections.every((_, i) => open[i] ?? false);
  const toggleAll = () => {
    if (allOpen) {
      setOpen({});
    } else {
      setOpen(Object.fromEntries(sections.map((_, i) => [i, true])));
    }
  };

  return (
    <div style={{ fontFamily: 'system-ui, -apple-system, sans-serif' }}>
      {sections.length > 1 && (
        <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: 10 }}>
          <button
            onClick={toggleAll}
            style={{
              background: 'none',
              border: 'none',
              color: primary,
              fontSize: 12,
              fontWeight: 700,
              cursor: 'pointer',
              padding: '4px 8px',
              borderRadius: 6,
              textDecoration: 'underline',
              textUnderlineOffset: 3,
            }}
          >
            {allOpen ? 'Collapse all' : 'Expand all'}
          </button>
        </div>
      )}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
      {sections.map((s, i) => {
        const isOpen = open[i] ?? false;
        return (
          <div
            key={i}
            style={{
              border: '1px solid #e2e8f0',
              borderRadius: radius,
              overflow: 'hidden',
              transition: 'box-shadow 0.2s',
              boxShadow: isOpen ? '0 4px 14px rgba(0,0,0,0.06)' : 'none',
              fontFamily: 'system-ui, -apple-system, sans-serif',
            }}
          >
            <button
              onClick={() => toggle(i)}
              style={{
                width: '100%',
                display: 'flex',
                justifyContent: 'space-between',
                alignItems: 'center',
                padding: '14px 18px',
                background: isOpen ? '#f8fafc' : '#fff',
                border: 'none',
                cursor: 'pointer',
                fontSize: 14,
                fontWeight: 700,
                color: '#1e293b',
                textAlign: 'left',
                transition: 'background 0.15s',
              }}
            >
              <span>{s.label}</span>
              <span style={{
                fontSize: 12,
                color: primary,
                transform: isOpen ? 'rotate(180deg)' : 'rotate(0)',
                transition: 'transform 0.22s ease',
                display: 'inline-block',
              }}>▼</span>
            </button>

            {isOpen && (
              <div
                style={{
                  padding: '12px 18px 18px',
                  fontSize: 13,
                  color: '#475569',
                  lineHeight: 1.75,
                  borderTop: '1px solid #f1f5f9',
                  background: '#fff',
                }}
                dangerouslySetInnerHTML={{ __html: s.body }}
              />
            )}
          </div>
        );
      })}
      </div>
    </div>
  );
}
